<template>
  <view class="viewport">
    <!-- #ifndef MP-TOUTIAO -->
    <!-- 自定义导航栏 -->
    <uni-nav-bar class="uni-nav-bar" background-color="rgba(255,255,255,0)" color="#fff" :border="false"
      :statusBar="true" @clickLeft="goBack">
      <template #left>
        <view class="icon-arrow-left"></view>
      </template>
      <template #default>
        <view class="title">{{ getBaseTypeName(baseType!) }}模拟考试</view>
      </template>
    </uni-nav-bar>
    <!-- #endif -->
    <!-- 抖音小程序顶部导航 -->
    <!-- #ifdef MP-TOUTIAO -->
    <view class="toutiao-nav-bar">
      <view class="status-bar"></view>
      <view class="title-container">
        <view class="title">模拟考试</view>
      </view>
    </view>
    <!-- #endif -->
    <scroll-view class="scroll-view" enable-back-to-top scroll-y>
      <!-- 头部封面 -->
      <view class="header-cover">
        <view class="header-tips">
          <image class='header-tips-img' src="https://media.jiabl.net.cn/miniapp/images/notice.png"
            mode="scaleToFill" />
          不知道怎么练吗？试试我为你推荐的高效学习方法吧
          <uni-icons type="right" color="#525252" size="12" />
        </view>
      </view>

      <!-- 用户信息 -->
      <view class="profile">
        <view class="profile-header">
          <view class="profile-header-user">
            <image class="avatar"
              src="https://p3.douyinpic.com/aweme/100x100/aweme-avatar/tos-cn-i-0813_ow7ZnnhOIAG2ofABLBzDALeAZEB7AAedMCEywb.jpeg?from=3782654143"
              mode="heightFix"></image>
            <view class="nick-name">回眸一笑</view>
          </view>
          <view class="profile-header-rate">
            <view class="rate">30<text class="txt">%</text><text class="txt icon-xiang-you"></text></view>
            <view class="tip">预测考试通过率</view>
          </view>
        </view>
        <view class="exam-plan-date">已过预约考试<text class="exam-plan-date-num">67</text>天</view>

        <!-- 预测考试通过率 -->
        <view class="forecast-exam-pass-rate">
          <view class="exam-pass-rate-tips">
            <text class="tips-label">预测考试通过率<text class="tips-label-keyword">很低</text></text>
            <text class="tips-desc">定制课程高效学</text>
          </view>
          <view class="exam-pass-rate-button">去提升</view>
        </view>

      </view>
      <view class="main-panel">
        <!-- 考试记录 -->
        <view class="exam-exam-records">
          <view class="exam-record" @tap="toExerciseNoAnswerQuestions">
            <view class="num">{{ mockExamOverView?.examCount }}<text class="num-icon icon-right"></text></view>
            <view class="text">考试次数
            </view>
          </view>
          <view class="exam-record">
            <view class="num">{{ mockExamOverView?.passCount }}</view>
            <view class="text">合格次数</view>
          </view>
          <view class="exam-record">
            <view class="num">{{ mockExamOverView?.overageScore }}</view>
            <view class="text">平均分</view>
          </view>
          <view class="exam-record">
            <view class="num">{{ mockExamOverView?.errorQuestionCount }} <text class="num-icon icon-right"></text>
            </view>
            <view class="text">错题数</view>
          </view>
        </view>
        <!-- 导航按钮 -->
        <view class="nav-btn-panel">
          <view class="nav-btn-item start-exam" @tap="toMockExam">开始考试</view>
          <navigator hover-class="none" :url="`/pagesExam/preExamPaper/preExamPaper?baseType=${baseType}`">
            <view class="nav-btn-item common">
              考前密卷
            </view>
          </navigator>

          <view class="nav-btn-item common mock-btn" @tap="toMockRealExam">
            <view class="btn-title">
              <text class="txt">真实考场模拟</text>
              <text class="hot">推荐</text>
            </view>
            <view class="btn-title-desc">
              高度还原正式考试答题体验
            </view>
          </view>
        </view>

        <!-- 模拟须知 -->
        <view class="mock-notice icon-warning" @tap="openMockNoticeModal">
          模拟须知
        </view>
      </view>
      <!-- 考试注意事项和我的成绩 -->
      <view class="notice-score">
        <view class="notice-score-item" @tap="openExamNoticePopup">
          <view class="item-title">考试注意事项</view>
          <image class="item-img" src="https://media.jiabl.net.cn/miniapp/images/mock_exam/notice.png"
            mode="scaleToFill" />
        </view>
        <view class="notice-score-item">
          <view class="item-title">我的成绩单</view>
          <image class="item-img" src="https://media.jiabl.net.cn/miniapp/images/mock_exam/my_score.png"
            mode="scaleToFill" />
        </view>
      </view>
      <!-- 真实考场模拟 -->
      <view class="mock-real-exam safe-area-insets">
        <view class="mock-real-exam-info">
          <view class="mock-real-exam-title">科一真实考场模拟</view>
          <view class="mock-real-exam-tips">
            <view class="tip-item">
              <text class="tip-item-num">1</text>
              <text class="tip-item-txt">提前了解考试界面操作</text>
            </view>
            <view class="tip-item">
              <text class="tip-item-num">2</text>
              <text class="tip-item-txt">高度还原考场出题规则</text>
            </view>
          </view>
          <view class="mock-real-exam-btn" @tap="toMockRealExam">
            <text class="去考试">去考试</text>
            <uni-icons class="right-1" type="right" color="#fff" size="15" />
            <uni-icons class="right-2" type="right" color="#a6f7c8" size="14" />
          </view>
        </view>
        <image class="mock-real-exam-img" src="https://media.jiabl.net.cn/miniapp/images/mock_exam/mock_real_exam.png"
          mode="scaleToFill" />
      </view>
      <!-- 安全区域 -->
      <view class="safe-area-insets-bottom"></view>
    </scroll-view>
  </view>
  <!-- 模拟须知提示对话框 -->
  <uni-popup ref="mockNoticeModalRef" type="dialog" :mask-click="false">
    <view class="mock-notice-modal">
      <view class="mock-notice-modal-title">
        模考须知
      </view>
      <view class="mock-notice-modal-items">
        <view class="mock-notice-modal-item">
          <view class="item-label">考试科目</view>
          <view class="item-value">{{ mockExamRule?.baseTypeName }}</view>
        </view>
        <view class="mock-notice-modal-item">
          <view class="item-label">准驾车型</view>
          <view class="item-value">{{ mockExamRule?.driveTypeName }}</view>
        </view>
        <view class="mock-notice-modal-item">
          <view class="item-label">考试标准</view>
          <view class="item-value">{{ mockExamRule?.standardName }}</view>
        </view>
        <view class="mock-notice-modal-item">
          <view class="item-label">考试标准</view>
          <view class="item-value">{{ mockExamRule?.examQuestionCount }}题，{{ mockExamRule?.examTime }}分钟</view>
        </view>
        <view class="mock-notice-modal-item">
          <view class="item-label">合格标准</view>
          <view class="item-value">{{ mockExamRule?.standardName }}</view>
        </view>
        <view class="mock-notice-modal-item">
          <view class="item-label">出题规则</view>
          <view class="item-value">{{ mockExamRule?.questionSettingRuleName }}</view>
        </view>
      </view>

      <view class="mock-notice-modal-bution" @tap="closeMockNoticeModal">
        我知道了
      </view>

    </view>
  </uni-popup>
  <!-- 考试注意事项-弹出层 -->
  <uni-popup ref="examNoticePopupRef" type="bottom" border-radius="10px 10px 0 0" :mask-click="false"
    :safe-area='false'>
    <view class="exam-notice-popup">
      <view class="header">
        <uni-icons type="closeempty" color="#525252" size="20" @tap="closeExamNoticePopup" />
      </view>
      <view class="title">考试须知</view>
      <scroll-view class="exam-notice-content" scroll-y>
        <view class="list-title">
          考前准备：
        </view>
        <view class="list-item">1、必须携带的证件：<text class="key-word">本人有效身份证</text>；</view>
        <view class="list-item">2、不能携带的物品：手机、电子设备、书籍、手提包等。</view>
        <view class="list-title">
          考场注意事项：
        </view>
        <view class="list-item">1、对号入座，坐姿正对摄像头的位置，<text class="key-word">确保面部可以全部显
            示在电脑左上角的图像框中</text>，考试过程中会随机抓拍照片，不要遮挡面部，否则系统会判你为不合格；</view>
        <view class="list-item">2、坐下后首先<text class="key-word">核对考生信息</text>，确认无误后点击确定开始考
          试；</view>
        <view class="list-item">3、每次预约考试有2次机会，第1次考试不合格，<text class="key-word">可以当场补
            考1次</text>。</view>
        <view class="list-title">
          答题注意事项：
        </view>
        <view class="list-item">1、<text class="key-word">答过的题目不能回头修改</text>，在提交进入下一题前，请认真检查所选选项；</view>
        <view class="list-item">2、对于不确定答案的题目，可以暂时不做点击下一题，最后在交卷之前，<text class="key-word">将题目全部做完，再点击确认交卷</text>。</view>
        <view class="list-item">3、考试过程中如果计算机出现问题，请举手报告，等待工作人员安排。</view>
      </scroll-view>
      <view class="know-button" @tap="closeExamNoticePopup">我知道了</view>

    </view>

  </uni-popup>
</template>

<script lang="ts" setup>
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { ref } from 'vue'
  import type { ExamRule } from '@/api/exam/types'
  import { ExerciseTypeEnum, ExamTypeEnum } from '@/api/constants'
  import { useExamRule, useMockExamOverView } from '@/composables/MockExam'

  const { safeAreaInsets } = uni.getSystemInfoSync()
  const safeAreaInsetsBottom = ref((safeAreaInsets?.bottom ? safeAreaInsets?.bottom : 0) * 2.5 + 'px')

  // #ifdef MP-TOUTIAO
  // 获取小程序下胶囊按钮的布局位置信息
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  // 上边界坐标，单位：px
  let top = (menuButtonInfo.top - 10) + 'px'
  const statusBarHeight = ref(top)
  // 高度，单位：px
  let height = (menuButtonInfo.height + 20) + 'px'
  const titleHeight = ref(height)
  // #endif
  const baseType = ref<string>()

  // 模拟考试数据概览
  const mockExamOverView = ref()
  // 考试规则
  const mockExamRule = ref<ExamRule>()

  onLoad((options: any) => {
    baseType.value = options.baseType
    mockExamRule.value = useExamRule(baseType.value!)
  })

  onShow(() => {
    mockExamOverView.value = useMockExamOverView(baseType.value!)
  })
  // 根据题库类型获取题库名称
  const getBaseTypeName = (baseType: string) => {
    if (baseType === 'km1') {
      return '科目一'
    }
    else if (baseType === 'km4') {
      return '科目四'
    }
  }

  // 模拟须知提示对话框
  const mockNoticeModalRef = ref()
  // 模拟须知提示对话框-打开
  const openMockNoticeModal = () => {
    mockNoticeModalRef.value.open()
  }
  // 模拟须知提示对话框-关闭
  const closeMockNoticeModal = () => {
    mockNoticeModalRef.value.close()
  }

  // 考试注意事项-弹出层
  const examNoticePopupRef = ref()

  // 打开-考试注意事项-弹出层
  const openExamNoticePopup = () => {
    examNoticePopupRef.value.open()
  }

  // 关闭-考试注意事项-弹出层
  const closeExamNoticePopup = () => {
    examNoticePopupRef.value.close()
  }

  // 去模拟考试
  const toMockExam = () => {
    uni.navigateTo({
      url: `/pagesExam/mockExamAnswer/mockExamAnswer?examType=${ExamTypeEnum.MockExam}&baseType=${baseType.value}`
    })
  }


  // 去真实考场模拟考试
  const toMockRealExam = () => {
    uni.navigateTo({
      url: `/pagesExam/mockRealExam/mockRealExam?baseType=${baseType.value}`
    })
  }

  // 去练习未做题
  const toExerciseNoAnswerQuestions = () => {
    uni.navigateTo({
      url: `/pagesExercise/answer/answer?exerciseType=${ExerciseTypeEnum.SequenceExerciseNoAnswerQuestions}&baseType=${baseType.value}`
    })
  }

  //退出
  const goBack = () => {
    uni.navigateBack()
  }
</script>

<style lang="scss" scoped>
  .viewport {
    background-repeat: no-repeat;
    background-image: url("https://media.jiabl.net.cn/miniapp/images/mock_exam_bg.png");
    background-size: 100% auto;
    background-color: #e5f3f0;
  }

  .uni-nav-bar {
    .icon-arrow-left {
      font-size: 16px;
      font-weight: bold;
    }

    .title {
      align-self: center;
      flex: 1;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
    }
  }

  /* #ifdef MP-TOUTIAO */
  // 抖音自定义导航栏
  .toutiao-nav-bar {

    // 顶部占位
    .status-bar {
      width: 100vw;
      height: v-bind(statusBarHeight);
    }

    // 标题行
    .title-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      height: v-bind(titleHeight);

      .title {
        // margin-left: 40rpx;
        color: #fff;
        font-size: 16px;
        font-weight: bold;
      }
    }


  }

  /* #endif */

  .scroll-view {
    display: flex;
    flex-direction: column;
    padding: 0 20rpx;


  }

  .header-cover {
    position: relative;
    margin-top: 2rpx;
    height: 280rpx;
    background: url("https://media.jiabl.net.cn/miniapp/images/mock_exam_cover.png") no-repeat;
    background-size: 100%;

    .header-tips {
      position: absolute;
      left: 0;
      bottom: 20rpx;
      height: 60rpx;
      width: 100%;
      color: #525252;
      font-size: 23rpx;
      line-height: 60rpx;
      background-color: #afebdf;
      border-radius: 27rpx;
      border: solid 2rpx #ffffff;
      opacity: 0.8;

      .header-tips-img {
        margin-top: -24rpx;
        margin-left: 10rpx;
        width: 41rpx;
        height: 46rpx;
      }
    }
  }

  // 用户信息
  .profile {
    display: flex;
    flex-direction: column;
    padding: 20rpx 40rpx;
    background-image: linear-gradient(180deg,
        #ecfffb 0%,
        #f7fdfd 51%,
        #ffffff 100%),
      linear-gradient(#ffffff,
        #ffffff);
    border-radius: 20rpx;

    .profile-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .profile-header-user {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 85rpx;

        .avatar {
          width: 85rpx;
          height: 85rpx;
          border-radius: 50%;
        }

        .nick-name {
          font-size: 26rpx;
          color: #141818;
          margin-left: 13rpx;
        }
      }

      .profile-header-rate {

        .rate {
          font-size: 76rpx;
          color: #fa5c5a;
          font-weight: bold;

          .txt {
            margin-left: 4rpx;
            font-size: 24rpx;
          }
        }

        .tip {
          font-size: 22rpx;
          color: #929a99;
        }
      }
    }

    .exam-plan-date {
      font-size: 24rpx;
      color: #141818;

      .exam-plan-date-num {
        color: #2eccad;
      }
    }

    // 预测考试通过率
    .forecast-exam-pass-rate {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 32rpx;
      margin-bottom: 20rpx;
      padding: 20rpx;
      font-size: 26rpx;
      background-color: #fff9ee;
      border-radius: 20rpx;
      border: solid 2rpx #ffe0ad;
      font-size: 26rpx;
      color: #141818;

      .exam-pass-rate-tips {
        display: flex;
        flex-direction: column;

        .tips-label {
          .tips-label-keyword {
            padding-left: 10rpx;
            font-size: 27rpx;
            color: #fa6062;
          }
        }

        .tips-desc {
          margin-top: 10rpx;
          font-size: 22rpx;
        }
      }

      .exam-pass-rate-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 140rpx;
        height: 50rpx;
        font-size: 24rpx;
        color: #441d00;
        background-image: linear-gradient(-90deg,
            #fac15e 0%,
            #fac96f 26%,
            #fad07f 51%,
            #fcde95 100%),
          linear-gradient(#58beff,
            #58beff);
        border-radius: 25rpx;
      }

    }
  }

  .main-panel {
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
    padding: 20rpx 40rpx;
    width: 710rpx;
    background-color: #ffffff;
    box-shadow: 8rpx 8rpx 38rpx 0rpx rgba(93, 93, 93, 0.07);
    border-radius: 20rpx;


    // 考试记录
    .exam-exam-records {
      display: flex;
      justify-content: space-between;
      margin: 40rpx 0 40rpx;

      .exam-record {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .num {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 46rpx;
          font-weight: bold;
          color: #333333;
        }

        .num-icon {
          margin-left: 5rpx;
          font-size: 20rpx;
        }

        .text {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          color: #898989;
        }

      }
    }

    // 导航按钮
    .nav-btn-panel {
      display: flex;
      flex-direction: column;

      .nav-btn-item {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 645rpx;
        padding: 20rpx 0;
        font-size: 32rpx;
        color: #fff;
        border-radius: 47rpx;
      }

      .common {
        display: flex;
        flex-direction: column;
        margin-top: 34rpx;
        color: #0f0f0f;
        border: solid 1rpx #2e2e2e;
      }

      .start-exam {
        background-image: linear-gradient(90deg,
            #5fe495 0%,
            #53c683 100%),
          linear-gradient(#5ddd90,
            #5ddd90);
      }

      .mock-btn {
        .btn-title {
          display: flex;
          color: #53c683;

          .hot {
            margin-left: 12rpx;
            width: 62rpx;
            height: 32rpx;
            font-size: 18rpx;
            color: #fff;
            text-align: center;
            line-height: 32rpx;
            background-color: #f16a66;
            border-radius: 12rpx 0rpx 12rpx 0rpx;
          }
        }

        .btn-title-desc {
          margin-top: 4rpx;
          font-size: 24rpx;
          color: #9b9b9b;
        }
      }
    }

    // 模拟须知
    .mock-notice {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 40rpx 0 20rpx;
      font-size: 28rpx;
      color: #53c683;

      &::before {
        margin-top: 4rpx;
        margin-right: 10rpx;
      }
    }
  }

  .notice-score {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;

    .notice-score-item {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 336rpx;
      height: 98rpx;
      border-radius: 20rpx;
      background-image: url('https://media.jiabl.net.cn/miniapp/images/mock_exam/notice_score_item_bg.png');
      background-size: 108rpx 61rpx;

      background-repeat: no-repeat;
      background-position: bottom right;

      background-color: #fff;

      .item-title {
        font-size: 26rpx;
        color: #333333;
        font-weight: bold;
      }

      .item-img {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }

  // 真实考场模拟
  .mock-real-exam {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20rpx;
    padding: 44rpx 30rpx;
    height: 365rpx;
    background-color: #fff;
    border-radius: 20rpx;


    .mock-real-exam-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;

      .mock-real-exam-title {
        font-size: 36rpx;
        color: #2b2b2b;
        font-weight: bold;

      }

      .mock-real-exam-tips {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        flex: 1;

        .tip-item {
          display: flex;
          justify-content: center;
          align-items: center;

          .tip-item-num {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10rpx;
            width: 30rpx;
            height: 30rpx;
            font-size: 23rpx;
            color: #ffffff;
            background-color: #53c683;
            border-radius: 50%;
          }

          .tip-item-txt {
            font-size: 26rpx;
            color: #172056;

          }
        }

      }

      .mock-real-exam-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 189rpx;
        height: 64rpx;
        font-size: 28rpx;
        color: #ffffff;
        background-color: #53c683;
        border-radius: 32rpx;

        .right-1 {
          margin-left: 6rpx;
        }

        .right-2 {
          margin-left: -15rpx;
        }
      }
    }

    .mock-real-exam-img {
      width: 287rpx;
      height: 206rpx;
    }
  }

  // 模拟须知提示对话框
  .mock-notice-modal {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30rpx;
    width: 534rpx;
    height: 594rpx;
    background-color: #ffffff;
    border-radius: 20rpx;

    .mock-notice-modal-title {
      display: flex;
      justify-content: center;
      margin-top: 20rpx;
      font-size: 32rpx;
      color: #151515;
      font-weight: bold;

    }

    .mock-notice-modal-items {
      margin-top: 40rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex: 1;
      font-size: 24rpx;
      color: #1c1c1c;

      .mock-notice-modal-item {
        display: flex;
        width: 100%;
        justify-content: space-between;

        .item-label {
          color: #949494;
        }
      }

    }

    .mock-notice-modal-bution {
      margin-top: 42rpx;
      margin-bottom: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 460rpx;
      height: 73rpx;
      color: #ffffff;
      font-size: 28rpx;
      background-color: #53c683;
      border-radius: 37rpx;
    }
  }

  .exam-notice-popup {
    display: flex;
    flex-direction: column;
    padding: 30rpx 40rpx;
    height: 900rpx;
    background-color: #ffffff;
    border-radius: 20rpx 20rpx 0rpx 0rpx;

    .header {
      display: flex;
      justify-content: end;
    }

    .title {
      margin-top: -20rpx;
      margin-bottom: 10rpx;

      display: flex;
      justify-content: center;
      font-size: 34rpx;
      color: #1b1b1b;
      font-weight: bold;

    }

    .exam-notice-content {
      display: flex;
      flex-direction: column;
      flex: 1;

      .list-title {
        margin: 20rpx 0;
        font-size: 30rpx;
        color: #1b1b1b;
        font-weight: bold;
      }

      .list-item {
        font-size: 26rpx;
        color: #1b1b1b;
        line-height: 1.8;

        .key-word {
          color: #ff4143;
        }
      }
    }

    .know-button {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      height: 75rpx;
      font-size: 26rpx;
      color: #ffffff;
      background-color: #53c683;
      border-radius: 38rpx;
    }
  }

  // 底部安全距离
  .safe-area-insets-bottom {
    height: v-bind(safeAreaInsetsBottom);
  }


</style>
